<template>
	<view class="container">
		<view class="ss-flex ss-row-between ss-p-30">
			<view class="text-black ss-font-12 " style="text-align:left" @tap="handleToIndex">首页</view>
			<view class="text-black ss-font-12" style="text-align:right" @tap="handleToAnalysis">数据分析</view>
		</view>
		<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption">
			<view v-if="hotelChangeList.length > 0" class="list">

				<!-- 数据列表 -->
				<view class="bg-white ss-r-10 ss-m-t-14 ss-m-20 border-bottom" v-for="item in hotelChangeList" :key="item.id">

					<view class="ss-shop-card-warp ss-flex ss-col-stretch ss-row-between bg-white">
						
						<view class="box-right ss-flex-col ss-row-between">
							<view class="title-text ">{{ item.roomName }}</view>
							<view class="spec-text" v-if="item.changeType==1 || item.changeType==2">原价 {{item.beforePrice}} 元 现价 {{item.price}} 元</view>
							<view class="spec-text" v-else>--</view>
						</view>

						<view class="ss-flex-col ss-row-between">
<!-- 							<view class="total-text" v-if="item.changeType==1 || item.changeType==2">
								<text v-if="item.changeType==1">原价{{item.beforePrice}}元,现价{{item.price}}元</text>
								<text v-if="item.changeType==2"></text>
							</view> -->
							<view :class="item.changeType==1?'red-text':item.changeType==2 ?'green-text':'default-text'" >{{formatStatus(item.changeType)}} </view>
							<view class="">{{item.opTime}}</view>
						</view>

					</view>
				</view>

			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import {
		selectHotelRoomChangeList
	} from "@/api/system/roomChange"
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";

	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				upOption: {
					// page: {
					// 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					// 	size: 10 // 每页数据的数量
					// },
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					textNoMore: '没有更多数据了',
					empty: {
						tip: '暂无房源', // 提示
						icon: 'https://cdn.uviewui.com/uview/empty/list.png',
					}
				},
				searchParams: {
					hotelId: '',
					pageSize: '10',
					pageNum: '1'
				},
				hotelChangeList: []
			}
		},
		methods: {
			upCallback(page) {
				this.searchParams.pageNum = page.num; // 页码, 默认从1开始
				this.searchParams.pageSize = page.size; // 页长, 默认每页10条
				selectHotelRoomChangeList(this.searchParams).then(response => {

					// 接口返回的当前页数据列表 (数组)
					let curPageData = response.rows;

					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
					let curPageLen = curPageData.length;
					// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
					let totalPage = response.total;
					//设置列表数据
					if (page.num == 1) this.hotelChangeList = []; //如果是第一页需手动置空列表
					this.hotelChangeList = this.hotelChangeList.concat(curPageData); //追加新数据

					// 请求成功,隐藏加载状态
					//方法一(推荐): 后台接口有返回列表的总页数 totalPage
					this.mescroll.endBySize(curPageLen, totalPage);

					//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
					//this.mescroll.endBySize(curPageLen, totalSize); 

					//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
					//this.mescroll.endSuccess(curPageLen, hasNext); 

					//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.
					//如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据
					//如果传了hasNext,则翻到第二页即可显示无更多数据.
					//this.mescroll.endSuccess(curPageLen);

					// 如果数据较复杂,可等到渲染完成之后再隐藏下拉加载状态: 如
					// 建议使用setTimeout,因为this.$nextTick某些情况某些机型不触发
				}).catch(() => {
					this.mescroll.endErr()
				})
			},
			formatStatus(status){
				if(status=='1'){
					return '涨价';
				}
				else if(status=='2'){
					return '降价';
				}
				else if(status=='3'){
					return '补房';
				}
				else if(status=='4'){
					return '满房';
				}
				else if(status=='5'){
					return '上架';
				}
				else if(status=='6'){
					return '下架';
				}
			},
			handleToAnalysis(){
				// uni.setStorageSync('hotelId',this.searchParams.hotelId);  //把需要传递的参数设置为本地缓存
				// uni.setStorageSync('roomId',this.searchParams.roomId);  //把需要传递的参数设置为本地缓存
				this.$tab.switchTab(`/pages/hotel/analysis/index`)
			},
			handleToIndex(){
				// uni.setStorageSync('hotelId',this.searchParams.hotelId);  //把需要传递的参数设置为本地缓存
				// uni.setStorageSync('roomId',this.searchParams.roomId);  //把需要传递的参数设置为本地缓存
				this.$tab.switchTab(`/pages/index`)
			},
			
		},
		onLoad(event) {
			if (event.hotelId) {
				this.searchParams.hotelId = event.hotelId
			}
			if(event.roomId){
				this.searchParams.roomId = event.roomId
			}
		}
	}
</script>


<style lang="scss" scoped>
	.ss-shop-card-warp {
		padding: 20rpx;

		.img-box {
			width: 80rpx;
			height: 80rpx;
			border-radius: 10rpx;
			overflow: hidden;

			.order-img {
				width: 80rpx;
				height: 80rpx;
			}
		}

		.box-right {
			flex: 1;
			// width: 500rpx;
			// height: 164rpx;
			position: relative;
		}

		.title-text {
			font-size: 28rpx;
			font-weight: 500;
			line-height: 40rpx;
		}

		.spec-text {
			font-size: 24rpx;
			font-weight: 400;
			color: $dark-9;
			min-width: 0;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
		}
		.red-text {
			text-align: right;
			font-size: 24rpx;
			font-weight: 400;
			color: red;
			margin-left: 8rpx;
		}
		.green-text {
			text-align: right;
			font-size: 24rpx;
			font-weight: 400;
			color: green;
			margin-left: 8rpx;
		}

		.default-text {
			text-align: right;
			font-size: 24rpx;
			font-weight: 400;
			color: $dark-9;
			margin-left: 8rpx;
		}
	}
</style>